<template>
	<view class="category-container">
		<top-title-text @closeBtn="closeBtn" titleText="分类管理"></top-title-text>
		<scroll-view scroll-y="true" style="height: 1200rpx;width: 100%;">
		    <view class="category-scroll-view-container" >
				<view class="category-list-container">
					<view :class="['category-item-content', {'selected': index == accountBookIndex}, {'not-selected': index != accountBookIndex}]" v-for="(item, index) in accountBookList" 
						:key="index" :style="{width: (item.width - 20)+ 'rpx'}" @click="selectAccountBook(item, index)">
						{{item.name}}
					</view>
				</view>
				<!-- 两个 一个支出  一个收入 v-if="item.payCategoryList" -->
				<view class="category-item-container" >
					<view class="category-item-up-title-add-icon-container">
						<view class="category-item-up-left-title-container">支出</view>
						<view class="category-item-up-right-add-icon-container">
							<view class="right-add-btn-bgc-container" @click="add('pay')">
								 <view class="right-add-btn-bgc iconfont icon-jiajianzujianjiahao"></view>
							</view>
						</view>
					</view>
					<view class="category-item-down-content" v-for="(pay, index) in payCategoryList" :key="index">
						<!-- 每个账单 -->
						<view class="category-item-bill-left-icon-name-container">
							<view class="category-item-bill-left-icon-container">
								<view class="category-item-bill-left-icon-bgc-container" :style="{backgroundColor: pay.bgcColor}">
									<view :class="['category-item-bill-left-icon-content', 'iconfont', pay.icon]"></view>
								</view>
							</view>
							<view class="category-item-bill-left-name-container">{{pay.name}}</view>
						</view>
						<view class="category-item-bill-right-more-icon-container">
							<view class="ledger-item-more-icon-item-container">
								<view class="ledger-item-more-icon-item iconfont icon-sandian" @click="selectOperateLedger(pay, index)"></view>
							</view>
						</view>
					</view>
				</view>
				<!-- 两个 一个支出  一个收入 -->
				<view class="category-item-container">
					<view class="category-item-up-title-add-icon-container">
						<view class="category-item-up-left-title-container">收入</view>
						<view class="category-item-up-right-add-icon-container">
							<view class="right-add-btn-bgc-container" @click="add('income')">
								 <view class="right-add-btn-bgc iconfont icon-jiajianzujianjiahao"></view>
							</view>
						</view>
					</view>
					<view class="category-item-down-content" v-for="(income, index) in incomeCategoryList" :key="index">
						<!-- 每个账单 -->
						<view class="category-item-bill-left-icon-name-container">
							<view class="category-item-bill-left-icon-container">
								<view class="category-item-bill-left-icon-bgc-container" :style="{backgroundColor: income.bgcColor}">
									<view :class="['category-item-bill-left-icon-content', 'iconfont', income.icon]"></view>
								</view>
							</view>
							<view class="category-item-bill-left-name-container">{{income.name}}</view>
						</view>
						<view class="category-item-bill-right-more-icon-container">
							<view class="ledger-item-more-icon-item-container">
								<view class="ledger-item-more-icon-item iconfont icon-sandian" @click="selectOperateLedger(income, index)"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {checkStrType2} from '@/util/regular/regular.js';
	import topTitleText from '@/components/top-title-text/top-title-text.vue';
	import editDeleteOther from '@/components/edit-delete-other/edit-delete-other.vue';
    export default {
		components: {
			topTitleText, editDeleteOther
		},
		props: {
			categoryList: {
				type: Array,
				default: () => []
			},
			accountBookList: {
				type: Array,
				default: () => []
			},
		},
        data() {
            return {
				payCategoryList: [],					// 支出
				incomeCategoryList: [],					// 收入
				accountBookIndex: 0,
				categoryTestList: [],					// 测试分类集合
				widthLength: 0, 						// 测试宽度
				indicator: true,
                accountName: '牛逼',
				addName: '添加',
				selectList: [{
					id: 1,
					name: '编辑',
					showRed: false
				}, {
					id: 2,
					name: '删除',
					showRed: true
				}],
            }
        },
		methods: {
			/**
			 * 添加明细事件 （可能是收入， 支出）
			 * @param {Object} type
			 * @param {Object} index
			 */
			add(type, index) {
				this.$emit("showBillDetail", type,  index);
			},
			/** 
			 * 点击分类事件
			 * @param {Object} item
			 * @param {Object} index
			 */
			selectAccountBook(item, index1) {
				this.accountBookIndex = index1;
				this.payCategoryList = this.accountBookList[this.accountBookIndex].payCategoryList;
				this.incomeCategoryList = this.accountBookList[this.accountBookIndex].incomeCategoryList;
			},
			/** 卡片上编辑回调
			 * @param {Object} item
			 * @param {Object} index
			 */
			editOperate(item, index) {
				// 回调给设置主页面，让他弹框
				this.$emit("showAccountDetail", item, index);
			},
			/**
			 * 卡片上删除回调
			 */
			deleteOperate(item, index) {
				this.$emit("deleteAccountDetail", item, index);
			},
			/** 点击选择操作
			 * @param {Object} item 对象
			 * @param {Object} index 索引
			 */
			selectOperateLedger(item, index) {
				this.categoryList.forEach((item1, index1) =>  {
					if (index == index1) {
						item1.showEditFlag = !item1.showEditFlag;
					}
				});
			},
			/**
			 * 新增回调
			 */
			addLedger() {
				this.$emit("addCategory");
			},
			/**
			 * 点击x 回调
			 */
			closeBtn() {
				this.$emit("closeBtn");
			}
		},
		mounted() {
			if (this.accountBookList) {
				this.payCategoryList = this.accountBookList[this.accountBookIndex].payCategoryList;
				this.incomeCategoryList = this.accountBookList[this.accountBookIndex].incomeCategoryList;
			}
		},
    }
</script>

<style lang="scss">
	
	.category-container {
		width: 100%;
		height: 1320rpx;
		padding: 20rpx;
		box-sizing: border-box;
		
		.category-scroll-view-container {
			width: 100%;
			min-height: 1200rpx;
			box-sizing: border-box;
			padding: 20rpx 0rpx;
			
			.category-list-container {
				width: 100%;
				min-height: 40rpx;
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;
				flex-wrap: wrap;
				// border: 1rpx solid green;
				
				.category-item-content {
					height: 100%;
					padding: 10rpx 20rpx;
					border-radius: 40rpx;
					// 宽度由计算而来
					font-size: 30rpx;
					color: $typefaceGreyColor;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right: 20rpx;
					box-shadow: 0px 0px 2px #dfdede;
					margin-bottom: 20rpx;
				}
				
				.selected {
					background-color: $themeYellowColor;
				}
				
				.not-selected {
					background-color: $themeBgcLightGreyColor;
				}
			}
			
			.category-item-container {
				width: 100%;
				min-height: 200rpx;
				display: flex;
				flex-direction: column;
				border: 1rpx solid #dfdede;
				box-shadow: 0px 0px 2px #dfdede;
				box-sizing: border-box;
				border-radius: 20rpx;
				margin-top: 30rpx;
				
				.category-item-up-title-add-icon-container {
					width: 100%;
					height: 80rpx;
					// border: 1rpx solid red;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0rpx 20rpx;
					box-sizing: border-box;
					border-bottom: 1rpx solid #dfdede;
					
					.category-item-up-left-title-container {
						font-size: 30rpx;
						
					}
					
					.category-item-up-right-add-icon-container {
						width: 20%;
						height: 100%;
						display: flex;
						justify-content: flex-end;
						align-items: center;
						
						.right-add-btn-bgc-container {
							width: 50rpx;
							height: 50rpx;
							background-color: $themeLightPurpleColor;
							display: flex;
							border-radius: 50%;
							justify-content: center;
							align-items: center;
						
							.right-add-btn-bgc {
								font-size: 30rpx;
								color: $themePurpleColor;
							}
						}
					}
				}
				
				.category-item-down-content {
					width: 100%;
					height: 100rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0rpx 20rpx;
					box-sizing: border-box;
						
					.category-item-bill-left-icon-name-container {
						width: 45%;
						height: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;

						
						.category-item-bill-left-icon-container {
							width: 30%;
							height: 100%;
							display: flex;
							justify-content: flex-start;
							align-items: center;
							
							.category-item-bill-left-icon-bgc-container {
								width: 60rpx;
								height: 60rpx;
								// background-color: $themeYellowColor;
								display: flex;
								border-radius: 50%;
								justify-content: center;
								align-items: center;
								color: white;
								
								.category-item-bill-left-icon-content {
								}
							}
						}
						
						.category-item-bill-left-name-container {
							width: 70%;
							height: 100%;
							font-size: 30rpx;
							display: flex;
							justify-content: flex-start;
							align-items: center;
						}
					}
					
					.category-item-bill-right-more-icon-container {
						width: 50%;
						height: 100%;
						display: flex;
						justify-content: flex-end;
						align-items: center;
						
						.ledger-item-more-icon-item-container {
							width: 60rpx;
							height: 60rpx;
							display: flex;
							border-radius: 50%;
							justify-content: center;
							align-items: center;
							background-color: $themeBgcLightGreyColor;
							position: relative;
							
							.ledger-item-more-icon-item {
								font-size: 35rpx;
								color: $themeDeepGreyColor;
							}
						}
					}
				}
			}
		}

	}
	
</style>
